<template>
  <div class="breadcrumb">
    <ul>
      <li v-for="(item, index) in navs" :key="item.path">
        <a href="#" @click.prevent="go(item.path, index)">{{ item.text }}</a>
        <span v-if="index !== navs.length - 1"></span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  // navs 需要的结构至少包含：1.文字 2.跳转的地址
  // navs === { text:"", path:"" }
  props: {
    navs: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  methods: {
    go(path, index) {
      if (index !== this.navs.length - 1) {
        // console.log(path, "path");
        this.$router.push(path);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.breadcrumb {
  ul {
    display: flex;
    padding: 20px 0;
    li {
      a {
        text-decoration: none;
        color: #333;
      }
      span {
        padding: 0 10px;
      }
    }
  }
}
</style>